<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.util.*,hotel.entity.*"%>
<section class="content-header">
	<h1>
		<i class="fa fa-calendar-check-o"></i> 入住登记~退房办理<small></small>
	</h1>
	<ol class="breadcrumb">
		<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
		<li class="active">入住登记~退房办理</li>
	</ol>
</section>

<section class="content">
	<div class="box">
		<div class="box-header">
			<button id="btn-add" type="button"
				class="layui-btn layui-btn-radius layui-btn-green">
				<i class="layui-icon">&#xe654;</i>入住登记
			</button>
			<button id="btn-addCustomer" type="button"
				class="layui-btn layui-btn-radius layui-btn-normal">
				<i class="layui-icon">&#xe613;</i>增加房客
			</button>
			<button id="btn-change" type="button"
				class="layui-btn layui-btn-radius layui-btn-warm">
				<i class="layui-icon">&#xe642;</i>更换房间
			</button>
			<button id="btn-view" type="button"
				class="layui-btn layui-btn-radius layui-btn-normal">
				<i class="layui-icon">&#xe63c;</i>查看详情
			</button>
			<button id="btn-checkout" type="button"
				class="layui-btn layui-btn-radius layui-btn-danger">
				<i class="fa fa-remove"></i> 退房办理
			</button>
		</div>

		<div class="box-body">
			<div class="col-md-12">
				<div class="box box-default">
					<div class="box-header with-border">
						<h3 class="box-title">
							<i class="fa fa-search"></i> 记录搜索
						</h3>

						<div class="box-tools pull-right">
							<button type="button" class="btn btn-box-tool" id="plus">
								<i class="fa fa-plus"></i>
							</button>
							<button type="button" class="btn btn-box-tool" id="minus">
								<i class="fa fa-minus"></i>
							</button>
						</div>

					</div>
					<div class="box-body" id="collapse-body">
						<form>
							<div class="col-md-4">
								<label>订单号：</label> <input id="orderNumber" class="form-control">
							</div>
							<div class="col-md-4">
								<label>房间类型：</label> <select id="categoryid"
									class="form-control">
									<option value=''></option>
									<%
										List<Category> list = (List<Category>) request.getAttribute("categoryList");
										if (list != null && list.size() > 0)
											for (Category c : list)
												out.print("<option value='" + c.getCategoryid() + "'>" + c.getCategoryName() + "</option>");
									%>
								</select>
							</div>
							<div class="col-md-4">
								<label>入住时间：</label> <input id="checkin_time" class="form-control">
							</div>
							<div class="col-md-4">
								<label>房间号：</label> <input id="no" class="form-control">
							</div>
							<div class="col-md-4">
								<label>姓名：</label> <input id="customerName" class="form-control">
							</div>
							<div class="col-md-4">
								<label>联系方式：</label> <input id="tele" class="form-control">
							</div>						
							<div class="col-md-4">
								<label>状态：</label> <select id="state" class="form-control">
									<option value=''></option>
									<option value='已入住'>已入住</option>
									<option value='已退房'>已退房</option>
								</select>
							</div>
							<div class="col-md-offset-5 col-md-3">
								<br>
								<button type="button" class="btn btn-primary" id="btn-search">
									<i class="fa fa-search"></i> 搜索
								</button>
								<button type="reset" class="btn btn-info" id="reset">
									<i class="fa fa-refresh"></i> 刷新
								</button>
							</div>
						</form>
					</div>
				</div>
			</div>
			<!-- End of SearchForm -->

			<table class="layui-table" id="checkinTable"></table>

		</div>
	</div>
</section>

<script type="text/javascript">
layui.use('laydate', function() {
	var start = layui.laydate;
	//执行一个laydate实例
	start.render({
		elem : '#checkin_time', //指定元素
	});
});

	layui.use('table', function() {
		var table = layui.table;
		table.render({
			elem : '#checkinTable',
			url : 'checkinlist',
			page : true,
			cols : [ [ //标题栏
			{
				type:'checkbox',
				rowspan : 2
			}, {
				field : 'itemid',
				title : 'ID',
				rowspan : 2,
				align : 'center',
				sort : true,
				width : 80
			}, 
			//rowspan即纵向跨越的单元格数
			//colspan即横跨的单元格数，这种情况下不用设置field和width
			{
				field : 'orderNumber',
				title : '订单号',
				rowspan : 2,
				align : 'center',
				sort : true
			}, {
				title : '房间信息',
				colspan : 2,
				align : 'center',
			}, {
				align : 'center',
				title : '入住信息',
				colspan : 2
			}, {
				title : '入离时间',
				colspan : 2,
				align : 'center',
			}, {
				field : 'operateUserId',
				title : '操作员编号',
				rowspan : 2,
				align : 'center',
				sort : true,
				width : 120
			}, {
				field : 'state',
				title : '状态',
				rowspan : 2,
				align : 'center',
				width : 85,
				sort : true
			}, ], [ {
				field : 'categoryName',
				title : '房间类型',
				align : 'center'
			}, {
				field : 'roomNo',
				title : '房号',
				align : 'center',
				width : 80,
				sort : true
			}, {
				field : 'count',
				title : '入住人数',
				align : 'center',
				width : 95
			}, {
				field : 'customerName',
				title : '姓名',
				align : 'center',
				width : 200
			}, {
				field : 'checkin_time',
				title : '入住时间',
				align : 'center',
				sort : true
			}, {
				field : 'checkout_time',
				title : '退房时间',
				align : 'center',
				sort : true
			} ] ]
		});

		//记录搜索，表格数据重载
		$('#btn-search').on('click', function() {
			table.reload('checkinTable', {
				where : { //设定异步数据接口的额外参数，任意设
					op : 'search',
					categoryid : $('#categoryid').val(),
					checkin_time : $('#checkin_time').val(),
					no : $('#no').val(),
					customerName : $('#customerName').val(),
					tele : $('#tele').val(),
					orderNumber : $('#orderNumber').val(),
					state : $('#state').val()
				},
				page : {
					curr : 1
				//重新从第 1 页开始
				}
			});
		});

		//重置
		$('#reset').on('click', function() {
			table.reload('checkinTable', {
				where : {op: 'view'},page : {curr : 1}
			});
		});
		
		//添加按钮
		$('#btn-add').click(function() {
			layer.open({ //layer弹出层
				type : 2,
				title : "入住登记",
				area : [ '1000px', '600px' ],
				content : 'makeNewSale',
				shade : [ 0.6, '#000' ],//阴影透明度
				anim : 2,//弹出动画
				isOutAnim : false,//关闭无动画
				//skin: 'layui-layer-molv',//皮肤
				end : function(index) {
					table.reload('checkinTable',{
						where : {},
						page : {curr : 1}
					});
				}
			});
		});
		
		//更换房间
		$('#btn-change').click(function() {
			var checkStatus = table.checkStatus('checkinTable'); //checkinTable即为数据表格id
			//console.log(checkStatus.data[0].reserveid) //获取选中行的数据
			//获取选中行数量，可作为是否有选中行的条件
			if(checkStatus.data.length>1||checkStatus.data.length==0){
				layer.msg('请选择一行! 当前选中行数: '+checkStatus.data.length, {time : 800,icon : 7});
			}else if(checkStatus.data.length==1){
				layer.open({
					type : 2,
					title : "更换房间",
					area : [ '1000px', '500px' ],
					content : 'changeRoom?itemid=' + checkStatus.data[0].itemid+'&roomNo='+checkStatus.data[0].roomNo,
					shade : [ 0.6, '#000' ],//阴影透明度
					//shadeClose: true,//点击阴影关闭
					anim : 2,//弹出动画
					isOutAnim : false,//关闭无动画
					end : function(index) {
						table.reload('checkinTable',{where : {},page : {curr : 1}});
					}
				});
			}
		});
		
		//增加房客
		$('#btn-addCustomer').click(function() {
			var checkStatus = table.checkStatus('checkinTable'); //checkinTable即为数据表格id
			//console.log(checkStatus.data[0].reserveid) //获取选中行的数据
			//获取选中行数量，可作为是否有选中行的条件
			if(checkStatus.data.length>1||checkStatus.data.length==0){
				layer.msg('请选择一行! 当前选中行数: '+checkStatus.data.length, {time : 800,icon : 0});
			}else if(checkStatus.data.length==1){
				if(checkStatus.data[0].count>=3){
					layer.msg('抱歉! 当前已达到房间最大入住人数3人',{time : 800,icon : 5});
					return ;
				}
				layer.open({
					type : 2,
					title : "房间："+checkStatus.data[0].roomNo+" 新增房客",
					area : [ '900px', '550px' ],
					content : 'addCustomer?itemid=' + checkStatus.data[0].itemid+'&count='+checkStatus.data[0].count+'&roomNo='+checkStatus.data[0].roomNo,
					shade : [ 0.6, '#000' ],//阴影透明度
					anim : 2,//弹出动画
					isOutAnim : false,//关闭无动画
					end : function(index) {
						table.reload('checkinTable',{where : {},page : {curr : 1}});
					}
				});
			}
		});
		
		//查看详情
		$('#btn-view').click(function() {
			var checkStatus = table.checkStatus('checkinTable'); //checkinTable即为数据表格id
			//获取选中行数量，可作为是否有选中行的条件
			if(checkStatus.data.length>1||checkStatus.data.length==0){
				layer.msg('请选择一行! 当前选中行数: '+checkStatus.data.length, {time : 800,icon : 0});
			}else if(checkStatus.data.length==1){
				layer.open({
					type : 2,
					title : "入住详情",
					area : [ '1000px', '600px' ],
					content : 'viewCheckin?itemid=' + checkStatus.data[0].itemid,
					shade : [ 0.6, '#000' ],//阴影透明度
					anim : 2,//弹出动画
					isOutAnim : false,//关闭无动画
					end : function(index) {
						table.reload('checkinTable',{where : {},page : {curr : 1}});
					}
				});
			}
		});
		
		//退房
		$('#btn-checkout').click(function() {
			var checkStatus = table.checkStatus('checkinTable');
			if(checkStatus.data.length>1||checkStatus.data.length==0){
				layer.msg('请选择一行! 当前选中行数: '+checkStatus.data.length, {time : 800,icon : 7});
			}else if(checkStatus.data.length==1){
				if(checkStatus.data[0].state==="已退房"){
					layer.msg('房间号: '+checkStatus.data[0].roomNo+' 已退房!', {time: 900, icon:2});
				}
				else{
					layer.msg('确定退房吗?<br>房间号:'+checkStatus.data[0].roomNo, {time: 0 ,btn: ['确定', '取消'],yes: function(index){
		 			 	$.ajax({
		     				type : "post",
		     				url : "checkout?itemid="+checkStatus.data[0].itemid,
		     				dataType : "json",
		     				success : function(data) {
		     					layer.msg('退房成功', {time: 1000, icon:1});
		     					table.reload('checkinTable',{where : {},page : {curr : 1}});
		     				},
		     				error : function() {
		     					layer.msg('系统出错!', {time: 1000, icon:2});
		     				}
		     			});
		 			 	layer.close(index);
			   		}
					});	
				}
			}
		});
			
		//加减号
		$('#plus').click(function() {
			$('#collapse-body').toggle();
		});
		$('#minus').click(function() {
			$('#collapse-body').toggle();
		});
	});
</script>